<template>
    <div class="homepage-hero-module">
        <div class="video-container">
            <div :style="fixStyle" class="filter">
                <transition name="move">
                    <div class="login-wrap">
                        <div class="ms-login">
                            <div class="ms-title">考勤管理系统</div>
                            <el-form v-show="!forgetShow" :model="param" :rules="rules" ref="login" label-width="0px"
                                     class="ms-content">
                                <el-form-item prop="username">
                                    <el-input v-model="param.username" placeholder="请输入用户名">
                                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input
                                            type="password"
                                            placeholder="请输入密码"
                                            v-model="param.password"
                                            @keyup.enter.native="submitForm()"
                                    >
                                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                                    </el-input>
                                </el-form-item>
                                <div class="login-btn">
                                    <el-button type="primary" @click="submitForm()">登录</el-button>
                                </div>
                                <a href="" class="login-tips" @click.prevent="forgetShow=!forgetShow">忘记密码</a>
                            </el-form>
                            <!--找回密码-->
                            <el-form v-show="forgetShow" :model="forgetParam" :rules="forgetRules" ref="find"
                                     label-width="0px"
                                     class="ms-content">
                                <el-form-item prop="username">
                                    <el-input v-model="forgetParam.username" placeholder="请输入用户名">
                                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input
                                            type="password"
                                            placeholder="请输入新密码"
                                            v-model="forgetParam.password"
                                    >
                                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="sPassword">
                                    <el-input
                                            type="password"
                                            placeholder="请再次确认密码"
                                            v-model="forgetParam.sPassword"
                                    >
                                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="verification">
                                    <el-input
                                            placeholder="请输入验证码"
                                            v-model="forgetParam.verification"
                                    >
                                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                                    </el-input>
                                </el-form-item>
                                <div class="login-btn">
                                    <el-button type="primary"
                                               style="width: 139px;background-color: darkseagreen;border-color: darkseagreen"
                                               :loading="loading"
                                               @click="sendMail">发送验证码
                                    </el-button>
                                    <el-button type="primary" style="width: 139px" @click="updPass">提交修改
                                    </el-button>
                                </div>
                                <a href="" class="login-tips" @click.prevent="forgetShow=!forgetShow">返回登陆</a>
                            </el-form>
                        </div>
                    </div>
                </transition>
            </div>
            <video :style="fixStyle" autoplay muted loop class="fillWidth" v-on:canplay="canplay">
                <!--        <source src="PATH_TO_MP4" type="video/mp4"/>-->
                <!--        浏览器不支持 video 标签，建议升级浏览器。-->
                <source :src="video" type="video/mp4"/>
                浏览器不支持 video 标签，建议升级浏览器。
            </video>
            <div class="poster hidden" v-if="!vedioCanPlay">
                <img :style="fixStyle" src="PATH_TO_JPEG" alt="">
            </div>
        </div>
    </div>
</template>
<script>
    import video from '../../../static/Carmela.mp4'
    import service from "../../utils/request";
    import qs from 'qs';

    export default {
        name: 'login',
        data() {
            return {
                sendFlag: false,
                loading: false,
                forgetShow: false,
                vedioCanPlay: false,
                fixStyle: '',
                video: video,
                show: false,
                param: {
                    username: '',
                    password: '',
                }, forgetParam: {
                    username: '',
                    password: '',
                    sPassword: '',
                    verification: ''
                },
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                }, forgetRules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    sPassword: [{required: true, message: '请再次输入密码', trigger: 'blur'}],
                    verification: [{required: true, message: '请输入验证码', trigger: 'blur'}]
                },
            }
        },
        methods: {
            updPass() {
                this.$refs.find.validate(valid => {
                    if (valid) {
                        if (this.forgetParam.password !== this.forgetParam.sPassword) {
                            this.$message.error('两次输入密码不一致，请重新输入')
                            return
                        }
                        if (this.sendFlag) {
                            service.get('/users/updPass', {
                                params: this.forgetParam
                            }).then(res => {
                                if (res === 1) {
                                    this.$message.success('密码修改成功')
                                } else if (res === 2) {
                                    this.$message.error('验证码错误,密码修改失败')
                                } else if (res === 3) {
                                    this.$message.error('请发送验证码')
                                }
                            }).catch(err => {
                                this.$message.error('密码修改失败,请检查网络连接')
                            })
                        } else {
                            this.$message.error('请先发送验证码')
                        }
                    }
                })
            },
            sendMail() {
                if (this.forgetParam.username === '') {
                    this.$message.error('请先输入用户名')
                } else {
                    this.loading = true
                    service.get('/users/verification', {
                        params: {
                            username: this.forgetParam.username
                        }
                    }).then(res => {
                        this.loading = false
                        if (res === 1) {
                            this.$message.success('验证码发送成功')
                            this.sendFlag = true
                        } else if (res === 2) {
                            this.$message.error('没有找到该用户')
                        } else {
                            this.$message.error('验证码发送失败')
                        }
                    }).catch(err => {
                        this.loading = false
                        this.$message.error('验证码发送失败，请检查网络连接')
                    })
                }
            },
            canplay() {
                this.vedioCanPlay = true
            }, submitForm() {
                this.$refs.login.validate(valid => {
                    if (valid) {
                        service.post("/users/login", qs.stringify(this.param)).then(res => {
                            if (res.status == 1) {
                                this.$message.success('登录成功');
                                localStorage.setItem('userInfo', JSON.stringify(res.message[0]));
                                this.$router.push('/');
                            } else {
                                this.$message.error('用户名或密码错误，请重新登录');
                                return false;
                            }
                        })
                    } else {
                        this.$message.error('请输入账号和密码');
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        mounted: function () {
            setTimeout(() => {
                this.show = true
            }, 500)
            window.onresize = () => {
                const windowWidth = document.body.clientWidth
                const windowHeight = document.body.clientHeight
                const windowAspectRatio = windowHeight / windowWidth
                let videoWidth
                let videoHeight
                if (windowAspectRatio < 0.5625) {
                    videoWidth = windowWidth
                    videoHeight = videoWidth * 0.5625
                    this.fixStyle = {
                        height: windowWidth * 0.5625 + 'px',
                        width: windowWidth + 'px',
                        'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                        'margin-left': 'initial'
                    }
                } else {
                    videoHeight = windowHeight
                    videoWidth = videoHeight / 0.5625
                    this.fixStyle = {
                        height: windowHeight + 'px',
                        width: windowHeight / 0.5625 + 'px',
                        'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                        'margin-bottom': 'initial'
                    }
                }
            }
            window.onresize()
        }
    }
</script>
<style scoped>
    .move-enter {
        padding-left: 100px;
    }

    .move-enter-active {
        transition: all 6s;
    }

    .move-enter-to {
        padding-left: 0;
    }

    .move-leave {
        padding-left: 0;
    }

    .move-leave-active {
        transition: all 6s;
    }

    .move-leave-to {
        padding-left: 100px;
    }

    .homepage-hero-module .welcome {
        margin-top: 400px;
        margin-left: 600px;
        font-weight: bold;
        font-size: 60px;
        color: white;
    }

    .homepage-hero-module,
    .video-container {
        position: relative;
        height: 100vh;
        overflow: hidden;
    }

    .video-container .poster img,
    .video-container video {
        z-index: 0;
        position: absolute;
    }

    .video-container .filter {
        z-index: 1;
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
    }

    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }

    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }

    .ms-content {
        padding: 30px 30px;
    }

    .login-btn {
        text-align: center;
    }

    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }

    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
</style>

